<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
 <title>Zipcode Map</title>
 <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
 <script src="mxn.js?(googlev3)" type="text/javascript" charset="utf-8" ></script>
 <script src="js/map.js" type="text/javascript" charset="utf-8" ></script>
 <script src="lib/proj4js-combined.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 <style type="text/css">
         div#mymap {  width: 400px; height: 350px; }
         </style>
         <script type="text/javascript">
function initialize() {
     // getting the polygon points

var pp=<?php  echo json_encode($lon) ?> ;
var qq=<?php  echo json_encode($lat) ?>;

var mm=[];
var nn=[];
$.each(pp,function(n,value) {
     //alert(n+':'+ value);
     mm[n]=parseFloat(value);
} );

$.each(qq,function(n,value) {
     //alert(n+':'+ value);
     nn[n]=parseFloat(value);

} );

var i=0;
var datapoints=[];

for (i=0;i<nn.length;i++) {
        datapoints.push( new google.maps.LatLng(mm[i],nn[i]) );

}

var pp1=<?php  echo json_encode($lon1) ?> ;
var qq1=<?php  echo json_encode($lat1) ?>;

var mm1=[];
var nn1=[];
$.each(pp1,function(n,value) {
     //alert(n+':'+ value);
     mm1[n]=parseFloat(value);
} );

$.each(qq1,function(n,value) {
     //alert(n+':'+ value);
     nn1[n]=parseFloat(value);

} );

// defining the basic map

var myLatlng = new google.maps.LatLng(mm1[0], nn1[0]);
var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN

};

var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

var zipdata;

 zipdata = new google.maps.Polygon({
    paths:datapoints,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });

  zipdata.setMap(map);

         };

</script>

</head>

<body onload="initialize()">

  <div id="map_canvas"></div>

</body>

</html> 